<div class="site-page-header-ghost-wrapper">
  <nz-page-header [nzGhost]="false">
    <nz-page-header-title>{{ 'outlay.title' | translate }}</nz-page-header-title>
    <nz-page-header-subtitle>{{ 'outlay.description' | translate }}</nz-page-header-subtitle>
    <nz-page-header-extra>
      <button nz-button nzType="primary" (click)="saveAction()">{{ 'actions.create' | translate }}</button>
    </nz-page-header-extra>
    <nz-page-header-content>
      <div class="align-left">
        <button nz-button (click)="getList()"><i nz-icon nzType="reload" nzTheme="outline"></i></button>
        <button nz-button [disabled]="modifyDisabled" (click)="updateAction()">{{ 'actions.modify' | translate }}</button>
        <button nz-button [disabled]="deleteDisabled" (click)="deleteAction()">{{ 'actions.delete' | translate }}</button>
        <button nz-button [disabled]="moreDisabled" [nzTrigger]="'click'" nz-dropdown [nzDropdownMenu]="menu">
          {{ 'actions.more' | translate }}
          <i nz-icon nzType="down"></i>
        </button>
        <nz-dropdown-menu #menu="nzDropdownMenu">
          <ul nz-menu>
            <li nz-menu-item nzDisabled>禁用</li>
          </ul>
        </nz-dropdown-menu>
      </div>
      <nz-table
        #table
        [nzData]="dataList"
        [nzLoading]="loading"
        [nzScroll]="{ x: '900px' }"
      >
        <thead>
          <tr>
            <th nzWidth="50px" [nzLeft]="true" [nzChecked]="checkAll" (nzCheckedChange)="onCheckAll($event)"></th>
            <th nzWidth="160px" [nzLeft]="true">{{ 'outlay.columns.name' | translate }}</th>
            <th>{{ 'outlay.columns.type' | translate }}</th>
            <th>{{ 'outlay.columns.money' | translate }}</th>
            <th>{{ 'outlay.columns.time' | translate }}</th>
            <th>{{ 'outlay.columns.mark' | translate }}</th>
            <th nzWidth="180px">{{ 'outlay.columns.log_time' | translate }}</th>
          </tr>
        </thead>
        <tbody>
          <ng-container *ngFor="let item of table.data">
            <tr>
              <td [nzLeft]="true" [nzChecked]="checkIds.includes(item.id)" (nzCheckedChange)="onItemCheck(item.id, $event)"></td>
              <td [nzLeft]="true">{{ item.name || '-' }}</td>
              <td>{{ item.type || '-' }}</td>
              <td>{{ item.money || '-' }}</td>
              <td>{{ item.time || '-' }}</td>
              <td>{{ item.mark || '-' }}</td>
              <td>{{ item.createDate || '-' }}</td>
            </tr>
          </ng-container>
        </tbody>
      </nz-table>
    </nz-page-header-content>
  </nz-page-header>
</div>